<template>
    <!-- 已登录 -->
    <div v-if="isLogin">
        <div class="member">
            <div class="user-info">
                <div class="avatar">
                    <img :src="avatar_default" class="image-info"/>
                </div>
                <div class="text-info">
                    <span>{{ user.name }}</span>
                </div>
            </div>
        </div>
        <div>
            <van-cell
                v-for="(item, i) of cellItems"
                :key="i"
                :icon="getUrl(item.img)"
                :title="item.title"
                is-link
                :to="item.path"
            />
            <van-cell
                @click="onClickLogout"
                :icon="getUrl('/uploads/system/logout.png')"
                title="退出登录"
                is-link
            />
        </div>
    </div>
    <!-- 未登录 -->
    <div v-else>
        <div class="member">
            <router-link :to="{ name: 'login' }" class="">
                <div class="user-info">
                    <div class="avatar">
                        <img :src="avatar_default" class="image-info"/>
                    </div>
                    <div class="text-info">登录 / 注册</div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
import {Cell} from "vant";
import {mapActions, mapGetters, mapState} from "vuex";
import {logout} from "../api/user"; // mapGetters

const buyerItem = [
    {
        title: "个人信息修改",
        path: "/buyer/info",
        img: "/uploads/system/user_info_update.png",
    },
    {
        title: "我的订单",
        path: "/order/list",
        img: "/uploads/system/order.png",
    },
    {
        title: "钱包",
        path: "/user/wallet",
        img: "/uploads/system/wallet.png",
    },
    {
        title: "收货地址",
        path: "/user/address/list",
        img: "/uploads/system/receipt_address.png",
    },
]
const sellerItem = [
    {
        title: "个人信息修改",
        path: "/buyer/info",
        img: "/uploads/system/user_info_update.png",
    },
    {
        title: "钱包",
        path: "/user/wallet",
        img: "/uploads/system/wallet.png",
    },
    // {
    //     title: "发货提醒",
    //     path: "/buyer/notice",
    //     img: "/uploads/system/notice.png",
    // },
    {
        title: "我的订单",
        path: "/seller/orders",
        img: "/uploads/system/undelivery.png",
    },
    {
        title: "发货地址",
        path: "/seller/addresses",
        img: "/uploads/system/receipt_address.png",
    },
]

export default {
    components: {
        [Cell.name]: Cell,
    },
    created: function () {
        this.isLogin = this.$store.state.user.isLogin;
        this.updateCellItems()
    },
    data() {
        return {
            isLogin: true,
            avatar_default: require("@/assets/images/avatar_default.png"),
            cellItems: buyerItem,
        };
    },
    computed: {
        ...mapState(["user"]),
        ...mapGetters("user", ["isSeller"])
    },
    watch: {},
    methods: {
        ...mapActions("user", ["logout"]),
        getUrl(url) {
            return this.baseUrl + url
        },
        async onClickLogout() {
            let result = await this.logout();
            if (result.state) {
                this.$toast("退出成功");
                this.$router.push({name: "welcome"})
            } else {
                this.$toast("退出失败");
            }
        },
        updateCellItems() {
            console.log("User isSeller", this.isSeller)
            if (this.isSeller) {
                this.cellItems = sellerItem
            } else {
                this.cellItems = buyerItem
            }
        }
    },
};
</script>

<style lang="less" scoped>
.member {
    margin-top: 15px;
    padding: 10px;

    .user-info {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 120px;
        background: linear-gradient(90deg, #28a2ff, #ffd787);
        box-shadow: 0 0.1rem 0.25rem #f8e3c6;

        .avatar {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);

            width: 80px;
            height: 80px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 15);
            border: 1px solid hsla(0, 0%, 100%, 0.4);
            border-radius: 50% 50%;

            .image-info {
                width: 100%;
                height: 100%;
            }
        }

        .text-info {
            position: absolute;
            left: 120px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: rgb(65, 16, 241);
        }
    }
}
</style>
